<template>
  <view class="page">
    <CommonNavbar :showBack="true"></CommonNavbar>

    <view class="main padding-sm radius-lg">
      <view class="header">
        <view class="flex-sub">
          <up-text size="28" color="#3D511D" text="每日日报"></up-text>
          <up-text size="14" color="#3D511D" text="每天一小记，成长智慧积" margin="60rpx 0 0 0"></up-text>
        </view>
        <view>
          <image src="/static/images/icon-calendar.png" style="width: 200rpx" mode="widthFix"></image>
        </view>
      </view>
      <view class="container">
        <!-- 基础信息 -->
        <view class="margin-top-xl">
          <view>
            <up-text prefixIcon="/static/images/icon-report_1.png" text="基础信息" color="#3D511D" size="28"
              iconStyle="width:64rpx;height:64rpx;margin-right:10rpx" align="center"></up-text>
          </view>
          <view class="bg-white radius-lg padding-lr padding-tb-lg margin-top-sm">
            <view class="flex justify-center align-center text-lightgray bg-gray padding-tb-sm" @click="openMood"
              v-if="!state.reportInfo.dailyStatus">
              今日状态
            </view>
            <view class="flex align-center justify-center" v-else>
              <up-image width="32" height="32" :src="state.reportInfo.dailyStatus.url" bgColor="white"></up-image>

              {{ state.reportInfo.dailyStatus.title }}
            </view>

            <view class="flex justify-center align-center text-lightgray margin-top-xs bg-gray padding-tb-sm"
              @click="state.selectDatePicker = true">
              {{
                state.reportInfo.reportDate
                  ? dayjs(state.reportInfo.reportDate).format('YYYY-MM-DD')
                  : '请选择日期'
              }}
            </view>

            <up-input placeholder="请输入主题" customStyle="height:96rpx;background:#F3F3F3;margin-top:10rpx"
              inputAlign="center" border="none" v-model="state.reportInfo.topic"></up-input>
          </view>
        </view>

        <!-- 学术表现 -->
        <view>
          <view class="margin-top-sm">
            <up-text prefixIcon="/static/images/icon-report_2.png" text="学术表现" color="#3D511D" size="28"
              iconStyle="width:50rpx;height:50rpx;margin-right:10rpx" align="center" margin="30rpx 0"></up-text>
          </view>
          <view class="bg-white radius-lg padding-lr padding-tb-lg margin-top-sm">
            <up-text text="学习成绩" color="#3D511D" size="24" align="center"></up-text>
            <view class="flex align-center margin-top-xs padding-left-xs bg-gray padding-lr padding-tb-sm"
              :class="state.reportInfo.discipline ? '' : 'text-lightgray'" @click="state.selectSubject = true">
              {{ state.reportInfo.discipline ? state.reportInfo.discipline : '学科选择' }}
            </view>
            <view class="flex align-center text-lightgray margin-top-xs">
              <view class="flex-sub bg-gray padding-lr padding-tb-sm">
                <up-input border="none" placeholder="请输入考试成绩" v-model.number="state.reportInfo.score"></up-input>
              </view>
              <view class="flex-sub bg-gray padding-lr margin-left-sm padding-tb-sm">
                <up-input border="none" placeholder="请输入考试名称" v-model="state.reportInfo.examName"></up-input>
              </view>
            </view>
            <view class="flex-sub bg-gray margin-top-xs">
              <up-textarea border="none" v-model="state.reportInfo.weaknessDesc" placeholder="学习薄弱描述："
                customStyle="background:#F3F3F3"></up-textarea>
            </view>
            <!-- 学习态度，好奇心与兴趣，专注度 -->
            <view class="margin-top-xl" v-for="(item, index) in state.academicList" :key="index">
              <up-text :text="item.title" size="24" align="center"></up-text>
              <view class="flex justify-between margin-tb">
                <view class="grade-item" :class="state.reportInfo[item.field] == subItem.value ? 'active' : ''"
                  v-for="(subItem, subIndex) in item.gradeList" :key="subIndex"
                  @click="state.reportInfo[item.field] = subItem.value">
                  {{ subItem.name }}
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 抗挫折 setbackList-->
        <view class="margin-top-xl">
          <view>
            <up-text prefixIcon="/static/images/icon-report_3.png" text="抗挫折" color="#3D511D" size="28"
              iconStyle="width:64rpx;height:64rpx;margin-right:10rpx" align="center"></up-text>
          </view>
          <view class="bg-white radius-lg padding-lr padding-tb-lg margin-top-sm">
            <view class="margin-top-xl" v-for="(item, index) in state.setbackList" :key="index">
              <up-text :text="item.title" size="24" align="center"></up-text>
              <view class="flex justify-between margin-tb">
                <view class="grade-item" :class="state.reportInfo[item.field] == subItem.value ? 'active' : ''"
                  v-for="(subItem, subIndex) in item.gradeList" :key="subIndex"
                  @click="state.reportInfo[item.field] = subItem.value">
                  {{ subItem.name }}
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 独立与自律 independenceList-->
        <view class="margin-top-xl">
          <view>
            <up-text prefixIcon="/static/images/icon-report_4.png" text="独立与自律" color="#3D511D" size="28"
              iconStyle="width:64rpx;height:64rpx;margin-right:10rpx" align="center"></up-text>
          </view>
          <view class="bg-white radius-lg padding-lr padding-tb-lg margin-top-sm">
            <view class="margin-top-xl" v-for="(item, index) in state.independenceList" :key="index">
              <up-text :text="item.title" size="24" align="center"></up-text>
              <view class="flex justify-between margin-tb">
                <view class="grade-item" :class="state.reportInfo[item.field] == subItem.value ? 'active' : ''"
                  v-for="(subItem, subIndex) in item.gradeList" :key="subIndex"
                  @click="state.reportInfo[item.field] = subItem.value">
                  {{ subItem.name }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 课外兴趣 extracurricularInterestList-->
        <view class="margin-top">
          <view>
            <up-text prefixIcon="/static/images/icon-report_5.png" text="课外兴趣" color="#3D511D" size="28"
              iconStyle="width:64rpx;height:64rpx;margin-right:10rpx" align="center"></up-text>
          </view>
          <view class="bg-white radius-lg padding-lr padding-tb-lg margin-top-sm">
            <view class="margin-top-xl" v-for="(item, index) in state.extracurricularInterestList" :key="index">
              <up-text :text="item.title" size="24" align="center"></up-text>
              <view class="flex justify-between margin-tb">
                <view class="grade-item" :class="state.reportInfo[item.field] == subItem.value ? 'active' : ''"
                  v-for="(subItem, subIndex) in item.gradeList" :key="subIndex"
                  @click="state.reportInfo[item.field] = subItem.value">
                  {{ subItem.name }}
                </view>
              </view>
            </view>
            <view>
              <up-textarea v-model="state.reportInfo.extracurricularRemark" placeholder="备注："
                customStyle="background:#F3F3F3"></up-textarea>
            </view>
          </view>
        </view>

        <!-- 解决与点评 -->
        <view class="margin-top-xl">
          <view>
            <up-text prefixIcon="/static/images/icon-report_5.png" text="解决与点评" color="#3D511D" size="28"
              iconStyle="width:64rpx;height:64rpx;margin-right:10rpx" align="center"></up-text>
          </view>
          <view class="bg-white radius-lg padding-lr padding-tb-lg margin-top-sm">
            <view class="flex align-center">
              <label for="">激发积极性：</label>
              <up-input border="none" v-model="state.reportInfo.motivation" placeholder="请输入分数"></up-input>
            </view>
            <view class="flex align-center margin-top-xl">
              <label for="">学习薄弱描述：</label>
              <up-input border="none" v-model="state.reportInfo.subjectWeaknessDesc" placeholder="请输入分数"></up-input>
            </view>
            <view class="margin-top-xl">
              <label for="">学习计划：</label>
              <up-textarea border="none" v-model="state.reportInfo.learningPlan" placeholder="请输入"></up-textarea>
            </view>
          </view>
        </view>
      </view>
      <!-- 日期选择控件 -->
      <up-datetime-picker :show="state.selectDatePicker" v-model="state.reportInfo.reportDate"
        @confirm="state.selectDatePicker = false" @cancel="state.selectDatePicker = false" confirmColor="#6D9319"
        mode="date"></up-datetime-picker>
      <!-- 学科选择 -->
      <up-popup :show="state.selectSubject">
        <view class="padding-tb-sm padding-lr">
          <up-icon name="close" @click="state.selectSubject = false"></up-icon>
          <up-text size="18" text="选择科目" align="center"></up-text>

          <view class="flex margin-top-sm">
            <view class="class-item" :class="state.reportInfo.discipline === item.name ? 'active' : ''"
              v-for="(item, index) in state.subClasses" :key="index" @click="state.reportInfo.discipline = item.name">{{
                item.name }}</view>
          </view>
        </view>
      </up-popup>
    </view>
    <view class="footer padding-top-sm">
      <!-- 上传分析 -->
      <u-button type="primary" text="上传分析" @click="submitReport" :loading="state.isLoading"></u-button>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { createReportApi } from '@/api/report.js';
import dayjs from 'dayjs';
onLoad((options) => {
  if (options.id) {
    state.reportInfo.studentId = options.id;
  }
  state.reportInfo.reportDate = dayjs();
});
const state = reactive({
  reportInfo: {
    reportDate: '',
    studentId: '',
    dailyStatus: '',
    topic: '',
    subject: '语文',
    discipline: '',
    score: '',
    examName: '',
    weaknessDesc: '',
    learningAttitude: 0,
    interest: '',
    concentration: '',
    stressManagement: '',
    communicationSkill: '良好',
    logicalExpression: '良好',
    empathy: '良好',
    timeManagement: '',
    selfPlanning: '',
    responsibility: '',
    extracurricularInterest: '',
    extracurricularRemark: '',
    motivation: '',
    subjectWeaknessDesc: '',
    learningPlan: '',
    handlingGrievance: ''
  },
  subClasses: [
    { id: 7, name: '生物' },
    { id: 8, name: '历史' },
    { id: 9, name: '地理' },
    { id: 10, name: '体育' }
  ],
  //学术考察维度列表
  academicList: [
    {
      title: '学习态度',
      field: 'learningAttitude', //学习态度
      gradeList: [
        {
          name: '优秀',
          value: '1'
        },
        {
          name: '良好',
          value: '2'
        },
        {
          name: '及格',
          value: '3'
        },
        {
          name: '不端正',
          value: '4'
        }
      ]
    },
    {
      title: '好奇心与兴趣',
      field: 'interest', //学习态度
      gradeList: [
        {
          name: '优秀',
          value: '1'
        },
        {
          name: '良好',
          value: '2'
        },
        {
          name: '及格',
          value: '3'
        },
        {
          name: '不端正',
          value: '4'
        }
      ]
    },
    {
      title: '专注度',
      field: 'concentration', //学习态度
      gradeList: [
        {
          name: '优秀',
          value: '1'
        },
        {
          name: '良好',
          value: '2'
        },
        {
          name: '及格',
          value: '3'
        },
        {
          name: '不专注',
          value: '4'
        }
      ]
    }
  ],
  //抗挫折维度列表
  setbackList: [
    {
      title: '压力管理',
      field: 'stressManagement', //压力管理
      gradeList: [
        {
          name: '优秀',
          value: '1'
        },
        {
          name: '良好',
          value: '2'
        },
        {
          name: '及格',
          value: '3'
        },
        {
          name: '不抗压',
          value: '4'
        }
      ]
    },
    {
      title: '应对委屈',
      field: 'handlingGrievance', //应对委屈
      gradeList: [
        {
          name: '优秀',
          value: '1'
        },
        {
          name: '良好',
          value: '2'
        },
        {
          name: '及格',
          value: '3'
        },
        {
          name: '不抗压',
          value: '4'
        }
      ]
    }
  ],
  //独立与自律维度列表
  independenceList: [
    {
      title: '时间管理',
      field: 'timeManagement', //压力管理
      gradeList: [
        {
          name: '优秀',
          value: '1'
        },
        {
          name: '良好',
          value: '2'
        },
        {
          name: '及格',
          value: '3'
        },
        {
          name: '较差',
          value: '4'
        }
      ]
    },
    {
      title: '自我规划',
      field: 'selfPlanning', //应对委屈
      gradeList: [
        {
          name: '优秀',
          value: '1'
        },
        {
          name: '良好',
          value: '2'
        },
        {
          name: '及格',
          value: '3'
        },
        {
          name: '无规划',
          value: '4'
        }
      ]
    },
    {
      title: '责任感',
      field: 'responsibility', //应对委屈
      gradeList: [
        {
          name: '优秀',
          value: '1'
        },
        {
          name: '良好',
          value: '2'
        },
        {
          name: '及格',
          value: '3'
        },
        {
          name: '较少',
          value: '4'
        }
      ]
    }
  ],
  //课外兴趣
  extracurricularInterestList: [
    {
      title: '课外兴趣',
      field: 'extracurricularInterest',
      gradeList: [
        {
          name: '丰富',
          value: '1'
        },
        {
          name: '良好',
          value: '2'
        },
        {
          name: '少',
          value: '3'
        },
        {
          name: '无',
          value: '4'
        }
      ]
    }
  ],
  isLoading: false,
  selectDatePicker: false,
  selectSubject: false
});

const submitReport = async () => {
  state.isLoading = true;

  const params = {
    ...state.reportInfo,
    dailyStatus: state.reportInfo.dailyStatus.id,
    reportDate: dayjs(state.reportInfo.reportDate).format('YYYY-MM-DD')
  };
  const result = await createReportApi(params);
  if (result.code === 200) {
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    });
    uni.switchTab({
      url: '/pages/index/index'
    })
    state.isLoading = false;
  } else {
    state.isLoading = false;
  }
};
const openMood = () => {
  uni.navigateTo({
    url: '/pages-sub/report/mood',
    events: {
      updataEmits: (data) => {
        console.log(data);
        state.reportInfo.dailyStatus = data.data;
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.container {
  border-radius: 20px;
  padding: 40rpx 20rpx;
  margin-top: 20rpx;
  background: linear-gradient(97deg,
      rgba(212, 233, 162, 0.4) 0%,
      rgba(184, 211, 122, 0.32) 18.41%,
      rgba(210, 233, 158, 0.36) 42.07%,
      rgba(201, 236, 124, 0.36) 67.49%,
      rgba(233, 255, 184, 0.4) 85.9%);
}

.header {
  display: flex;
  justify-content: space-between;
  border-radius: 20px;
  background: var(--color_primary_auxiliary2, rgba(141, 184, 46, 0.45));
  padding: 40rpx 32rpx;
}

.grade-item {
  height: 62rpx;
  line-height: 62rpx;
  border-radius: 0;
  font-size: 28rpx;
  border: solid 1px #6d9319;
  color: #6d9319;
  text-align: center;
  padding: 0 10rpx;

  &.active {
    background: #6d9319;
    color: white;
  }
}

.bg-gray {
  background: #f3f3f3;
}

.class-item {
  background: #f3f3f3;
  width: 15%;
  color: #000;
  font-size: 28rpx;
  text-align: center;
  padding: 20rpx 0;

  &:not(:first-child) {
    margin-left: 20rpx;
  }

  &.active {
    background: #7da02f;
    color: white;
  }
}
</style>
